<template>
  <div id="Pie" style="height: 500px"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  mounted() {
    let pieDom = document.getElementById('Pie');
    let pieChart = echarts.init(pieDom);
    let option;
    option = {
      color: [
        '#fc97af',
        '#E062AE',
        '#E690D1',
        '#e7bcf3',
        '#9d96f5',
        '#8378EA',
        '#96BFFF',
        '#72ccff'
  ],
      title: {
        text: '各个省份书院数量饼状分布图',
        subtext: '总数为1565个',
        x: 'center',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}个 ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: '25%',
        textStyle: {
          fontSize: 15,
        },
      },
      series: [
        {
          name: '书院数量',
          type: 'pie',
          radius: '50%',
          center: ['50%', '60%'],
          data: [
            { value: 125, name: '华北地区' },
            { value: 26, name: '东北地区' },
            { value: 559, name: '华东地区' },
            { value: 297, name: '华中地区' },
            { value: 209, name: '华南地区' },
            { value: 241, name: '西南地区' },
            { value: 108, name: '西北地区' },
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };

    let optionHuaBei = {
      title: {
        text: '华北地区书院数量饼状分布图',
        subtext: '总数为125个',
        x: 'center',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}个 ({d}%)',
      },
      legend: {
        orient: 'vertical',
        x: '25%',
      },
      series: [
        {
          name: '书院数目',
          type: 'pie',
          radius: ['30%', '60%'],
          avoidLabelOverlap: true,
          label: {
            normal: {
              show: false,
              position: 'center',
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '20',
                fontWeight: 'bold',
              },
            },
          },
          data: [
            { value: 12, name: '北京市' },
            { value: 10, name: '天津市' },
            { value: 60, name: '河北省' },
            { value: 40, name: '山西省' },
            { value: 3, name: '内蒙古自治区' },
          ],
        },
      ],
      graphic: [
        {
          type: 'text',
          left: '35%',
          top: 175,
          style: {
            text: '返回',
            textStyle: {
              fontSize: 15,
              fontWeight: 'bold',
            },
          },
          onclick: function () {
            pieChart.setOption(option);
          },
        },
      ],
    };

    let optionDongBei = {
      title: {
        text: '东北地区书院数量饼状分布图',
        subtext: '总数为26个',
        x: 'center',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}个 ({d}%)',
      },
      legend: {
        orient: 'vertical',
        x: '25%',
      },
      series: [
        {
          name: '书院数目',
          type: 'pie',
          radius: ['30%', '60%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center',
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '20',
                fontWeight: 'bold',
              },
            },
          },
          data: [
            { value: 15, name: '辽宁省' },
            { value: 7, name: '吉林省' },
            { value: 4, name: '黑龙江省' },
          ],
        },
      ],
      graphic: [
        {
          type: 'text',
          left: '35%',
          top: 175,
          style: {
            text: '返回',
            textStyle: {
              fontSize: '30',
            },
          },
          onclick: function () {
            pieChart.setOption(option);
          },
        },
      ],
    };

    let optionHuaDong = {
      title: {
        text: '华东地区书院数量饼状分布图',
        subtext: '总数为559个',
        x: 'center',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}个 ({d}%)',
      },
      legend: {
        orient: 'vertical',
        x: '25%',
      },
      series: [
        {
          name: '书院数目',
          type: 'pie',
          radius: ['30%', '60%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center',
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '20',
                fontWeight: 'bold',
              },
            },
          },
          data: [
            { value: 16, name: '上海市' },
            { value: 63, name: '江苏省' },
            { value: 118, name: '浙江省' },
            { value: 68, name: '安徽省' },
            { value: 55, name: '福建省' },
            { value: 112, name: '江西省' },
            { value: 94, name: '山东省' },
            { value: 33, name: '台湾省' },
          ],
        },
      ],
      graphic: [
        {
          type: 'text',
          left: '35%',
          top: 175,
          style: {
            text: '返回',
            textStyle: {
              fontSize: '30',
            },
          },
          onclick: function () {
            pieChart.setOption(option);
          },
        },
      ],
    };

    let optionHuaZhong = {
      title: {
        text: '华中地区书院数量饼状分布图',
        subtext: '总数为297个',
        x: 'center',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}个 ({d}%)',
      },
      legend: {
        orient: 'vertical',
        x: '25%',
      },
      series: [
        {
          name: '书院数目',
          type: 'pie',
          radius: ['30%', '60%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center',
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '20',
                fontWeight: 'bold',
              },
            },
          },
          data: [
            { value: 93, name: '河南省' },
            { value: 83, name: '湖北省' },
            { value: 121, name: '湖南省' },
          ],
        },
      ],
      graphic: [
        {
          type: 'text',
          left: '35%',
          top: 175,
          style: {
            text: '返回',
            textStyle: {
              fontSize: '30',
            },
          },
          onclick: function () {
            pieChart.setOption(option);
          },
        },
      ],
    };

    let optionHuaNan = {
      title: {
        text: '华南地区书院数量饼状分布图',
        subtext: '总数为209个',
        x: 'center',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}个 ({d}%)',
      },
      legend: {
        orient: 'vertical',
        x: '25%',
      },
      series: [
        {
          name: '书院数目',
          type: 'pie',
          radius: ['30%', '60%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center',
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '20',
                fontWeight: 'bold',
              },
            },
          },
          data: [
            { value: 90, name: '广东省' },
            { value: 88, name: '广西壮族自治区' },
            { value: 23, name: '海南省' },
            { value: 7, name: '香港特别行政区' },
            { value: 1, name: '澳门特别行政区' },
          ],
        },
      ],
      graphic: [
        {
          type: 'text',
          left: '35%',
          top: 175,
          style: {
            text: '返回',
            textStyle: {
              fontSize: '30',
            },
          },
          onclick: function () {
            pieChart.setOption(option);
          },
        },
      ],
    };

    let optionXiNan = {
      title: {
        text: '西南地区书院数量饼状分布图',
        subtext: '总数为241个',
        x: 'center',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}个 ({d}%)',
      },
      legend: {
        orient: 'vertical',
        x: '25%',
      },
      series: [
        {
          name: '书院数目',
          type: 'pie',
          radius: ['30%', '60%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center',
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '20',
                fontWeight: 'bold',
              },
            },
          },
          data: [
            { value: 0, name: '重庆市' },
            { value: 107, name: '四川省' },
            { value: 70, name: '贵州省' },
            { value: 64, name: '云南省' },
            { value: 0, name: '西藏自治区' },
          ],
        },
      ],
      graphic: [
        {
          type: 'text',
          left: '35%',
          top: 175,
          style: {
            text: '返回',
            textStyle: {
              fontSize: '30',
            },
          },
          onclick: function () {
            pieChart.setOption(option);
          },
        },
      ],
    };

    let optionXiBei = {
      title: {
        text: '西北地区书院数量饼状分布图',
        subtext: '总数为108个',
        x: 'center',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}个 ({d}%)',
      },
      legend: {
        orient: 'vertical',
        x: '25%',
      },
      series: [
        {
          name: '书院数目',
          type: 'pie',
          radius: ['30%', '60%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center',
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '20',
                fontWeight: 'bold',
              },
            },
          },
          data: [
            { value: 56, name: '陕西省' },
            { value: 34, name: '甘肃省' },
            { value: 7, name: '青海省' },
            { value: 9, name: '宁夏回族自治区' },
            { value: 2, name: '新疆维吾尔族自治区' },
          ],
        },
      ],
      graphic: [
        {
          type: 'text',
          left: '35%',
          top: 175,
          style: {
            text: '返回',
            textStyle: {
              fontSize: '30',
            },
          },
          onclick: function () {
            pieChart.setOption(option);
          },
        },
      ],
    };

    option && pieChart.setOption(option);

    pieChart.on('click', function (params) {
      //alert((params.name));
      if (params.name == '华北地区') {
        pieChart.setOption(optionHuaBei);
        graphic: [
          {
            type: 'text',
            left: 50,
            top: 20,
            style: {
              text: '返回',
              textStyle: {
                fontSize: '10',
              },
            },
            onclick: function () {
              pieChart.setOption(option);
            },
          },
        ];
      } else if (params.name == '东北地区') {
        pieChart.setOption(optionDongBei);
      } else if (params.name == '华东地区') {
        pieChart.setOption(optionHuaDong);
      } else if (params.name == '华中地区') {
        pieChart.setOption(optionHuaZhong);
      } else if (params.name == '华南地区') {
        pieChart.setOption(optionHuaNan);
      } else if (params.name == '西南地区') {
        pieChart.setOption(optionXiNan);
      } else if (params.name == '西北地区') {
        pieChart.setOption(optionXiBei);
      }
    });

    window.addEventListener('resize', function () {
      pieChart.resize();
    });
  },
};
</script>

<style></style>
